<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新闻详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			/*@font-face {font-family:dongqing;src: url('../../fonts/dongqing.otf');} 
			body,html,label,input,textarea,select,div,span,a{font-family:dongqing;}*/
			/*#list {margin-top: -1px;}*/
			html,body{width:100%; height:100%; background: #ffffff}
			.mui-content{width:6.525rem;/*max-width:6.68rem;*/height: 100%;position: relative;background: #ffffff;margin: 0 auto; overflow: auto;}
			.mui-content::-webkit-scrollbar {display: none;}
			.mui-content .title{color:#333;width:100%;font-size: 0.32rem;text-align:center;margin-top:.2rem;}
			.mui-content .time-box{width:100%;/*max-width:334px;*/height:0.25rem;color: #929292;}
			.mui-content .time-box span{float:left;font-size:0.24rem;}
			.mui-content .time-box .people{margin-left:0.522rem;}
			.mui-content .time-box .share{float:right;width: 0.27rem;height: 0.27rem;background: url(../../images/share.png) no-repeat center center;background-size: cover;margin-right: 0.17rem;}
			.mui-content .time-box .more{float:right;width: 0.27rem;height: 0.27rem;background: url(../../images/more.png) no-repeat center center;background-size: 100%;}
			.mui-content .synopsis{font-size:0.28rem;line-height:0.5rem;text-align: justify;color:#666666;width: 100%;height: auto;border-left:2px solid #c6c6c6;margin-top:.2rem;box-sizing: border-box;padding-left: 0.16rem;}
			.mui-content .synopsis .core{display: inline-block;width: 1.26rem;height: 0.46rem;font-size: 0.28rem;border: 1px solid #c08380; color: #b12d26;text-align: center;line-height: 0.46rem;border-radius: 0.1rem;}
			.mui-content .text{color: #333;width: 100%;height:auto;text-align: justify; text-justify: inter-ideograph; }
		 	.mui-backdrop .box{width: 100%;height: 3rem;background:#fff;position: fixed;bottom: 0;}
		 	.mui-backdrop .box .h6{text-align: center;width: 100%;font-size:0.28rem;height: 0.8rem;border-bottom: 1px solid #ccc;line-height: 0.8rem}
		 	.mui-backdrop .box .mui-input-row{padding: 0!important;width: 6rem;margin: 0 auto;margin-top: 0.08rem;}
		 	.mui-backdrop .box .mui-input-row span{margin-right:1rem;}
		 	.mui-backdrop .box .close{width: 1.4rem;height:0.4rem;border: 1px solid #0062CC; border-radius: 0.1rem;text-align: center; font-size: 0.24rem;line-height: 0.4rem;position: absolute;bottom: 0.4rem;left: 50%;margin-left: -0.7rem;color: #0062CC;}
		 	img{max-width:6.0rem!important;margin:.12rem 0.25rem!important;}
		</style>
	</head>
	<body>
		<!--头部-->
		<div class="mui-content" id='mui-content'>
			<h4 class="title">{{content.title}}</h4>
			<div class="time-box">
				<span class="time">发布日期：{{content.publishStartTime}}</span>
				<span class="people">来源：{{content.sourceName}}</span>
				<div class="more"></div>
			</div>
			<div class="synopsis">
				<!--<div class="core">核心内容</div>内容-->
			</div>
			<div class="text" v-html="content.contentText"></div>
		</div>
		<div class="mui-backdrop" style="display: none;">
			<div class="box">
				<div class="h6">文字大小</div>
				<div class="mui-input-row mui-input-range">
					<input id="range" type="range" min="14" max="50" value="0" step="2" onchange="change()">
					<span>标准</span>
					<span>大</span>
					<span>超大</span>
					<span style="margin-right: 0;">巨大</span>
				</div>
				<div  class="close">关闭</div>
			</div>
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/common.js"></script>
	<script src="../../js/vue.min.js"></script>
	<script src="../../js/jquery2.2.4.min.js"></script>
	<script src="../../js/app.js"></script>
	<script>
		mui.init();
		
		mui.plusReady(function(){
			
		});
		
		var vm = new Vue({
		  el: '#mui-content',
		  data: {
		  	content:''
		  }
		}); 
		
		var param = 'oid='+utils.getUrlParam("oid");//从上个页面获取的内容id
		utils.ajax('appHttpService/getCmsContentByOid.do', function(data) {
			data = JSON.parse(data);
			if(data.code == '1'){
				mui.toast('系统内部错误');
				return;
			}else{
				var content = data.cmsContent;
				if(content != null){
					vm.content = content;
				}
			}
			closeWaitingAndShowView();
		}, param); 
		
		
		var title = document.querySelector('.title');
		
		var mask = document.querySelector('.mui-backdrop');
		var more = document.querySelector('.more');
		var close = document.querySelector('.close');
		more.onclick=function(){
			mask.style.display='block';
		};
		close.onclick = function(){
			mask.style.display='none';
		}
	
		 
		var synopsis = document.querySelector('.synopsis');
		var text1 = document.querySelector('.text');
		var value
		function change(){
			synopsis.style.fontSize='14px!important';
			text1.style.fontSize='14px!important';
			value = document.getElementById('range').value;
			lineH = Number(value) + 9
			synopsis.style.fontSize= value + 'px!important';
			text1.style.fontSize= value + 'px !important';
			synopsis.style.lineHeight= lineH + 'px!important';
			text1.style.lineHeight= lineH  + 'px!important';
			
			$(text1).children().each(function(){
				this.setAttribute('style','font-size: '+value+'px !important;line-height: '+lineH+'px !important;')
			})
			
			
			mask.style.display='none';
		}
	</script>
</html>
